<script setup>
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
// 引入UnrealBloomPass通道
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
import {ref,onMounted} from 'vue'
let firstThree = ref()

const scene = new THREE.Scene()

const group = new THREE.Group()
scene.add(group)

let textureCube = new THREE.CubeTextureLoader()
                  .setPath("./public/Park2/")
                  .load(['posx.jpg','negx.jpg','posy.jpg','negy.jpg','posz.jpg','negz.jpg',])
textureCube.encoding = THREE.sRGBEncoding;
// 实例化加载器
let gltfLoader = new GLTFLoader();
let effect = null;
gltfLoader.load("./public/pbr/金属.glb",(gltf)=>{
  console.log(gltf);

  gltf.scene.traverse(function (obj) {
    if(obj.isMesh){
      obj.material.envMap = textureCube;
      obj.material.envMapIntensity = 1.0;
      obj.material.metalness = 1.0
      obj.material.roughness = 0.1
    }
  })
  group.add(gltf.scene)



})



// 环境光
const ambient = new THREE.AmbientLight("#fff",0.8)
scene.add(ambient)
// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(100, 60, 50);
scene.add(directionalLight);

const width = window.innerWidth;
const height = window.innerHeight;

const camera = new THREE.PerspectiveCamera(100,width/height,1,8000)
camera.position.set(0,40,-28)
camera.lookAt(10,5,0) 



// 解决渲染出来的图像有锯齿
const renderer = new THREE.WebGLRenderer({
  antialias:true
});
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.setSize(width,height)

function render(){
  requestAnimationFrame(render)
  effect && effect.render()
  renderer.render(scene,camera)
}
render()
// effect = new EffectComposer(renderer);
// let pass = new RenderPass(scene,camera)
// effect.addPass(pass)
// let bloom = new UnrealBloomPass(new THREE.Vector2(window.innerWidth,window.innerHeight))
// bloom.strength = 1.0
// effect.addPass(bloom)
const controls = new OrbitControls(camera,renderer.domElement)
controls.target.set(0,0,0)
controls.addEventListener("change",function(){
  renderer.render(scene,camera)
})
onMounted(()=>{
  document.getElementById("firstThree").appendChild(renderer.domElement)
})

</script>

<template>
  <div>
    <div id="firstThree" ref="firstThree"></div>
  </div>
</template>

<style scoped>
  #firstThree{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
  }
</style>
